<template>
  <div class="app-container">
    <el-card class="tree-card">
      <TreeTools :node-data="companyInfo" :is-company="true" @addDepts="addDepts" />
      <hr>
      <el-tree :data="depts" :default-expand-all="true" :props="{ label: 'name' }">
        <template v-slot="scoped">
          <TreeTools
            :node-data="scoped.data"
            :is-company="false"
            @addDepts="addDepts"
            @reloadPage="loadPage"
            @editDepts="editDepts"
          />
        </template>
      </el-tree>
    </el-card>
    <!-- <AddDepts :is-show-dialog="isShowDialog" :node-data="nodeData" @reloadPage="loadPage" @closeDialog="isShowDialog = false" /> -->
    <AddDepts ref="addDepts" :is-show-dialog.sync="isShowDialog" :node-data="nodeData" @reloadPage="loadPage" />
  </div>
</template>

<script>
import { getDeptsList } from '@/api/departments'
import TreeTools from './components/tree-tools.vue'
import AddDepts from './components/add-depts.vue'
import { listToTreeData } from '@/utils/index'
export default {
  components: {
    TreeTools,
    AddDepts
  },
  data() {
    return {
      companyInfo: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      depts: [],
      isShowDialog: false,
      nodeData: {}
    }
  },
  async created() {
    this.loadPage()
  },
  methods: {
    async loadPage() {
      const { depts } = await getDeptsList()
      this.depts = listToTreeData(depts, '')
    },
    addDepts(nodeData) {
      this.isShowDialog = true
      this.nodeData = nodeData
    },
    async editDepts(nodeData) {
      // 这里是父页面接到通知
      // 需要弹窗, 于是将变量设为 true
      this.isShowDialog = true
      // 还需要通知弹窗回显数据
      // 父组件调用子组件的函数,只需要触发 ref 获取组件实例即可
      await this.$refs.addDepts.getDeptsDetail(nodeData)
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
